<template>
  <div class="home">
    <Sticky>
      <Search
        clearable
        v-model="searchValue"
        shape="round"
        @search="search"
        background="rgb(1, 179, 249)"
        placeholder="请输入搜索关键词"
      ></Search>
      <Tabs background="#f5f5f5" v-model="active" sticky>
        <Tab
          v-for="(item, index) in tabs"
          :key="index"
          :name="index"
          :title="item.name"
        >
        </Tab>
      </Tabs>
      <div class="types-wrap-white">
        <div
          class="types-wrap"
          v-for="(item, index) in commission"
          :key="index"
        >
          <div class="type-name">
            {{ item.name }}
          </div>
          <div class="types">
            <div
              v-for="data in item.children"
              :key="data.id"
              @click="activeCommission(data)"
              class="type"
              :class="{ active: checkActiveCategory(data) }"
            >
              {{ data.name }}
            </div>
          </div>
        </div>
      </div>
    </Sticky>
    <div class="tool">
      <div @click="changeType" class="change">
        <div class="text">
          {{ type === "block" ? "切换九宫格" : "切换列表" }}
        </div>
        <div
          class="icon"
          :class="{ grad: type === 'grid', block: type === 'block' }"
        ></div>
      </div>
    </div>
    <PullRefresh v-model="loading" @refresh="onRefresh">
      <van-list
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="product-list-block-wrap"
          :class="{ 'product-list-grad-wrap': type === 'grid' }"
        >
          <template v-for="(item, index) in indexJson" :key="index">
            <item-cell v-if="type === 'grid'" :item="item"></item-cell>
            <item-row v-if="type === 'block'" :item="item"></item-row>
          </template>
        </div>
      </van-list>
    </PullRefresh>
  </div>
</template>

<script setup>
import { Search, Tab, Tabs, Sticky, List,PullRefresh } from "vant";
// import commission from "./commission.json";
import itemRow from "./modules/itemRow.vue";
import itemCell from "./modules/itemCell.vue";
import { onMounted, watch } from "vue";
import request from "@/utils/request.ts";
import { ref } from "vue";
const commission = ref([]);
const indexJson = ref([]);
const tabs = ref([]);
const active = ref(-1);
const loading = ref(true);
const finished = ref(false);
onMounted(() => {
  request({
    url: "/App/api/categoryList",
    method: "POST",
  }).then((res) => {
    tabs.value = res.data.map((item) => ({ name: item.name, id: item.id }));
    active.value = 0;
    commission.value = res.data[0].children;
  });
});
// import indexNew from "./indexNew.json";
const searchValue = ref("");
const activeCategory = ref([]);
const type = ref("grid");
const pageParams = {
  page:1,
  pageSize:15
}
const changeType = () => {
  if (type.value === "block") {
    type.value = "grid";
  } else {
    type.value = "block";
  }
};
const search = ()=>{
  onRefresh();
}
const activeCommission = (item) => {
  let data = [...activeCategory.value];
  let hasRepeatIndex = -1;
  data.forEach((it, index) => {
    if (it == item.id) {
      hasRepeatIndex = index;
    }
  });
  if (hasRepeatIndex >= 0) {
    data.splice(hasRepeatIndex, 1);
  } else {
    data.push(item.id);
  }
  activeCategory.value = data;
};
const onRefresh = ()=>{
  getProductList(true)
}
const onLoad = ()=>{
  getProductList(false)
}
const getProductList = (refresh) => {
  if(refresh){
    pageParams.page = 1
  }else{
    pageParams.page++;
  }
  loading.value = true;
  finished.value = false;
  request({
    url: "App/api/getProduct",
    method: "POST",
    data: {
      category_id: tabs.value[active.value].id,
      keyword_id: activeCategory.value.join(","),
      search_key:searchValue.value,
      ...pageParams
    },
  }).then((res) => {
    loading.value = false;
    if(refresh){
      indexJson.value = res.data.data;
    }else{
      indexJson.value = indexJson.value.concat(res.data.data);
    }
    if(res.data.data.length == 0){
      finished.value = true
    }
  });
};
watch(activeCategory, (newValue, oldValue) => {
  getProductList(true);
});
watch(active, () => {
  getProductList(true);
});
const checkActiveCategory = (item) => {
  let hasActive = false;
  activeCategory.value.forEach((it) => {
    if (it == item.id) {
      hasActive = true;
    }
  });
  return hasActive;
};
</script>

<style scoped lang="scss">
.types-wrap {
  display: flex;
}
.home {
  //overflow-x: hidden;
}
.types-wrap-white {
  background-color: #fff;
  padding: 10px 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.home {
  background: url(@/assets/bg/bg-user.png) 0 -75px/375px
    210px no-repeat;
  background-color: #f5f3f3;
  min-height: 100vh;
}
.type-name {
  width: 77px;
  display: flex;
  justify-content: center;
  font-size: 13px;
  height: 24px;
  align-items: center;
  color: #1677ff;
  font-weight: 700;
}
.types {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 77px);
}
.type {
  font-size: 13px;
  color: #333;
  height: 24px;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type.active {
  background-color: #1677ff;
  color: #fff;
  font-weight: 700;
  border-radius: 17.5px;
}
.product-list-block-wrap {
  width: 351px;
  margin: 12px auto 0;
  padding-bottom: 10px;
}
.product-list-grad-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin: 12px auto 0;
  box-sizing: border-box;
  padding: 0 12px 0 3px;
}
.tool {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 8px;
}
.tool .change {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  margin-right: 12px;
}
.tool .change .text {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}
.tool .change .icon {
  width: 13px;
  height: 13px;
  margin-left: 6px;
}
.tool .change .grad {
  background: url(/src/assets/icon/icon-change1.png)
    50%/100% 100% no-repeat;
}
.tool .change .block {
  background: url(/src/assets/icon/icon-change.png)
    50%/100% 100% no-repeat;
}
</style>